<template>
	<view>
		<!-- <view class="" :style="'height:'+statusBarHeight+'rpx'"></view> -->
		<u-navbar
			title="转赠中心"
			rightText="订单"
			:placeholder="true"
			:autoBack="true"
			@rightClick="$fun.jump(`/pages/order/orderlist`)"
			leftIconColor='#FFFFFF'
			style="font-weight: bold;color: #FFFFFF;"
			bgColor="#9999FF"
		>
		<view class="" slot='center' style="color: #FFFFFF;">
			转赠中心
		</view>
		</u-navbar>
		<view class="hline"></view>
		<view class="donation">
			<view class="donation_top flex-between">
				<view class="left flex">
					<view class="left_text" @click="btnsel(1)">
						<view class="name" :class="isline==1?'isname':''">购买</view>
						<view class="left_line" :class="isline==1?'isline':''"></view>
					</view>
					<view class="left_text" @click="btnsel(2)">
						<view class="name" :class="isline==2?'isname':''">出售</view>
						<view class="left_line" :class="isline==2?'isline':''"></view>
					</view>
				</view>
				<view class="right" @click="$fun.jump(`./release`)">发布</view>
			</view>
			<view class="paytype flex-between" @click="showtype=true">
				<view class="flex"><text>{{paytype?paytype:'支付方式'}}</text><image src="../../static/wallet/down.png" mode=""></image></view>
			</view>
			<u-picker :show="showtype" :columns="columnstype" keyName='nmae' @confirm="confirm" @cancel="showtype=false"></u-picker>
		</view>
		<scroll-view scroll-y="true" :style="'height:'+scrollheight+ 'px;'">
			<view class="donationmain" v-for="(item,index) in 6" :key="index">
				<view class="donationmain_top flex-between">
					<view class="left flex">
						<image src="../../static/sel.png" mode=""></image>
						<view class="">哈哈哈</view>
					</view>
					<view class="right">2024-10-10  20:00:06</view>
				</view>
				<view class="donationmain_center">
					<view class="text1"><span>￥</span>10.12</view>
					<view class="text2"><span>数量</span>2,000.12 火豆</view>
				</view>
				<view class="donationmain_bottom flex-between">
					<view class="left">
						<view class="flex">
							<image src="../../static/wallet/Alipay.png" mode=""></image><text>支付宝</text>
							<image src="../../static/wallet/wechat.png" mode=""></image><text>微信支付</text>
							<image src="../../static/wallet/backid.png" mode=""></image><text>银行卡</text>
						</view>
					</view>
					<view class="right" v-if="isline==1" @click="$fun.jump(`/pages/order/addorder?title=购买&type=1`)">购买</view>
					<view class="right" v-if="isline==2" @click="$fun.jump(`/pages/order/addorder?title=出售&type=2`)">出售</view>
				</view>
			</view>
		</scroll-view>
		<u-overlay :show="show" >
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="solt-content" solt='default'>
						需要先实名认证
					</view>
					<view class="btn">
						<view class="btnclose" @click="show=false">
							取消
						</view>
						<view class="btnsure" @click="btrsure">
							确定
						</view>
					</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight:0,
				scrollheight:0,
				isline:1,
				showtype:false,
				show:false,
				columnstype:[
					[{nmae:'微信',id:1},{nmae:'支付宝',id:2},{nmae:'银行卡',id:3}]
				],
				paytype:''
			}
		},
		onShow() {
			const phoneInfo = uni.getSystemInfoSync(); // 获取手机系统信息
			this.statusBarHeight = phoneInfo.statusBarHeight
			this.scrollheight=uni.getWindowInfo().windowHeight-152
		},
		methods: {
			btnsel(res){
				this.isline=res
			},
			confirm(e){
				console.log(e)
				this.paytype=e.value[0].nmae
				this.showtype=false
			},
			btrsure(){
				this.show=false
				
			},
		}
	}
</script>

<style lang="scss">
.u-navbar__content__title{
	color: #FFFFFF;
}
.hline{
		width: 750rpx;
		height: 80rpx;
		background-color: #9999FF;
	}
.donation{
	margin-top: -50rpx;
	&_top{
		width: 750rpx;
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
		.left{
			font-weight: 500;
			font-size: 32rpx;
			color: #999999;
			margin-top: 20rpx;
			&_text{
				margin-right: 60rpx;
			}
			&_line{
				width: 36rpx;
				height: 8rpx;
				border-radius: 4rpx;
				margin: 20rpx auto 0;
			}
			.isname{
				color: #333333;
			}
			.isline{
				background: #9999FF;
			}
		}
		.right{
			font-weight: 500;
			font-size: 28rpx;
			color: #9999FF;
			width: 120rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			background: #FFFFFF;
			border-radius: 48rpx;
			border: 2rpx solid #9999FF;
		}
	}
}
.paytype{
	font-weight: 500;
	font-size: 32rpx;
	color: #333333;
	width: 750rpx;
	height: 92rpx;
	background: #FFFFFF;
	align-items: center;
	padding-left: 30rpx;
	box-sizing: border-box;
	.flex{
		align-items: center;
	}
	image{
		width: 28rpx;
		height: 28rpx;
	}
}
	.donationmain{
		width: 690rpx;
		height: 271rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 30rpx auto;
		box-sizing: border-box;
		&_top{
			height: 68rpx;
			padding: 0 20rpx;
			border-bottom: 1rpx solid #EAEAEA;
			.left{
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
			}
			image{
				width: 28rpx;
				height: 28rpx;
				margin-right: 10rpx;
			}
			.right{
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}
		}
		&_center{
			padding: 0 20rpx;
			.text1{
				font-weight: 500;
				font-size: 36rpx;
				color: #333333;
				margin: 20rpx 0 16rpx;
				span{
					font-size: 24rpx;
				}
			}
			.text2{
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
				span{
					color: #999999;
					margin-right: 10rpx;
				}
			}
		}
		&_bottom{
			padding: 15rpx 20rpx;
			.left{
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
				margin-top: 15rpx;
				image{
					width: 24rpx;
					height: 24rpx;
					margin-right: 10rpx;
				}
				text{
					margin-right: 10rpx;
				}
			}
			.right{
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				width: 160rpx;
				height: 56rpx;
				line-height: 56rpx;
				text-align: center;
				background: #9999FF;
				border-radius: 48rpx;
			}
		}
	}
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		.rect {
			width: 560rpx;
			height: 224rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			text-align: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #19181A;
			font-style: normal;
			padding: 40rpx 30rpx;
			box-sizing: border-box;
		}
		.btn{
			display: flex;
			justify-content: space-between;
			margin: 40rpx auto 0;
			.btnclose{
				width: 230rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				border-radius: 32rpx;
				border: 2rpx solid #5D78FF;
				font-weight: 500;
				color: #5D78FF;
				font-size: 28rpx;
				
			}
			.btnsure{
				width: 230rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				background: #5D78FF;
				border-radius: 32rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}
</style>
